<!--
 * @Author         : ygl
 * @Date           : 2024-10-11 15:57
 * @LastEditTime   : 2024-10-12 13:08
 * @LastEditors    : ygl
 * @Description    :
-->
<template>
  <div>
    <div class="progress-column" @click="handlePositionItem">
      <div v-for="item in filteredModel" :key="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
  labelKey: {
    type: Object,
    required: true,
    default: () => ({
      label1: '',
      label1Key: '',
      label2: '',
      label2Key: ''
    })
  },
  model: {
    type: Object,
    required: true,
    default: () => {
      return {}
    }
  },
  propsDayDate: {
    type: String,
    default: () => '',
    require: false
  }
})

// 计算属性：过滤掉 startTime 和 filingTime 后的对象
const filteredModel = computed(() => {
  const entries = Object.entries(props.model).filter(([key]) => !['startTime', 'filingTime'].includes(key))
  return Object.fromEntries(entries.slice(0, 2)) // 只取前两个
})

const emit = defineEmits(['handlePositionItem'])
function handlePositionItem () {
  emit('handlePositionItem', props.model)
}
</script>

<style scoped lang="less">
.progress-column {
  cursor: pointer;
  display: flex;
  height: 25px;
  align-items: center;
  > div {
    box-sizing: border-box;
    height: 18px;
    line-height: 20px;
    width: 80px;
    font-weight: 400;
    opacity: 0.8;
    background-color: rgba(112, 189, 255, 0.2);
    border-right: 1px solid rgba(218, 248, 255, 0.3);
    &:nth-child(1) {
      text-align: center;
      width: 74px;
    }
    &:nth-child(2) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 225px;
      padding: 0 8px;
    }
  }
}
</style>
